<script name="Equity" setup>
import "@/utils/rem";
import { ref, onMounted } from "vue";
// import { showToast } from "vant"
import { useRouter } from "vue-router";

import { listEquity } from "@/api/member/list";

import { showToast } from "vant";
const router = useRouter();
const baseUrl = "https://fx.yunyoutongxin.com/prod-api";
// const baseUrl = "http://192.168.0.164:18080";
const active = ref(0);
/** 查列表 */
const type = ref("周卡");
const typeList = ref(["周卡", "月卡", "季卡"]);
const loading = ref(false);
const equityList = ref([]);
function getList() {
  loading.value = true;
  listEquity({ page: 1, size: 999, cardType: type.value })
    .then((res) => {
      loading.value = false;
      equityList.value = res.rows;
    })
    .finally(() => {
      loading.value = false;
    });
}
getList();
const changeTabs = (name) => {
  //   console.log(name);
  if (name == 0) {
    type.value = "周卡";
  }
  if (name == 1) {
    type.value = "月卡";
  }
  if (name == 2) {
    type.value = "季卡";
  }
  getList();
};

const toReceive = (item) => {
  router.push(`/benefits?c=${item.equityCode}`);
};
const toSearch = () => {
  router.push(`/searchE`);
};
onMounted(() => {
  document.title = "权益福利";
});

/**END */
</script>
<template>
  <div
    style="width: 100vmin; max-width: 750px; margin: 0 auto"
    class="bg"
    v-loading="loading"
  >
    <div
      class="benifits-header"
      style="
        background-image: url('https://fx.yunyoutongxin.com/xcximages/banner.jpg');
      "
    >
      <span class="receive-record" @click="toSearch">领取记录</span>
    </div>
    <div class="qy-box title-01">
      <van-image
        width="auto"
        height="auto"
        fit="contain"
        src="https://fx.yunyoutongxin.com/xcximages/title.png"
      />
    </div>
    <div class="tabs-box">
      <van-tabs
        v-model:active="active"
        swipeable
        @change="changeTabs"
        color="#fff"
      >
        <van-tab v-for="item in typeList" :key="item">
          <template #title>
            <van-button plain type="primary" class="tabs-btn">{{
              item
            }}</van-button>
          </template>
          <div v-if="!equityList.length">
            <van-empty description="暂无内容" />
          </div>
          <div v-else class="mt">
            <van-grid :gutter="6" :column-num="3" :border="false">
              <van-grid-item
                v-for="item in equityList"
                :key="item.id"
                @click="toReceive(item)"
              >
                <van-image :src="`${baseUrl}${item.imagePath}`">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
                <p class="text">{{ item.equityName }}</p>
                <p class="text text1">￥{{ item.var1 }}</p>
                <van-button
                  color="linear-gradient(to right, #c49848, #edd089)"
                  round
                  size="mini"
                >
                  领取权益
                </van-button>
              </van-grid-item>
            </van-grid>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div
      class="title-02"
      style="
        background-image: url('https://member.zlhz.wostore.cn/service-image/wcy-image/qy-page/wcy_qinchunhuangjin-HN/title-02.png');
      "
    ></div>
    <div class="activity-info">
      1、下单带有指定会员权益的套餐，每月可通过此页面领取会员特权礼包：<br />（1）
      每月可任选一款，次月可更换;<br />（2）礼包领取仅当月有效，未及时领取视作自动放弃，后续不支持补领;<br />（3）
      如您中途号卡状态发生异常，则当月起不可再领取;<br />（4）礼包内容会根据第三方平台有所调整，具体请以此页面实际显示为准;<br />(5)
      您激活后当月即可开始领取，领取规则以店铺宣传为 准。<br />
      2、领取礼包时，系统将自动核验您的手机号码在网情况如当月停机或离网，您将无法兑换，待当月状态正常后方可领取，请您谅解。<br />
      3、有任何疑问，请通过公众号【云邮通讯】联系客服
    </div>
    <div
      data-v-7bb60619=""
      class="bottom-bg"
      style="
        background-image: url('https://member.zlhz.wostore.cn/service-image/wcy-image/qy-page/wcy_qinchunhuangjin-HN/bottom-bg.png');
      "
    ></div>
  </div>
</template>
<style lang="scss" scoped>
.bg {
  //   height: 100%;
  background: rgb(1, 117, 250);
  //   background-size: 100% 100%;
}
.mb {
  margin-bottom: 0.1rem;
  padding: 0.2rem;
}
:deep(.van-popup--center.van-popup--round) {
  width: 80%;
}
.benifits-header {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 6rem;
  position: relative;
  width: 7.5rem;
  max-width: 750px;
}
.bottom-bg {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1.1rem;
  width: 7.5rem;
  max-width: 750px;
}
.title-01 {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 6.533333333333333vmin;
  margin: 3.3333333333333335vmin 0 9vmin;
  position: relative;
  width: 100vmin;
  max-width: 750px;
}
.title-02 {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 6.533333333333333vmin;
  margin-bottom: 5.333333333333334vmin;
  margin-top: 7.200000000000001vmin;
  width: 100vmin;
  max-width: 750px;
}
.activity-info {
  color: #d2f1fe;
  font-family: PingFangSC-Regular, Source Han Sans CN;
  font-size: 3.466666666666667vmin;
  margin-bottom: 2vmin;
  padding: 0 5.066666666666667vmin 0 5.333333333333334vmin;
  text-align: left;
}
.benifits-header .receive-record {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2.666666666666667vmin 0 0 2.666666666666667vmin;
  color: #fff;
  font-family: PingFangSC-Regular, Source Han Sans CN;
  font-size: 3.2vmin;
  padding: 0.6666666666666667vmin 1.866666666666667vmin 0.6666666666666667vmin
    2.9333333333333336vmin;
  right: 0;
  top: 4vmin;
}
.tabs-btn {
  background-color: #f3f5f6;
  border-radius: 0.4rem;
  color: #abaeb3;
  font-family: PingFangSC-Regular, Source Han Sans CN;
  font-size: 0.24rem;
  font-weight: 400;
  width: 1.5rem;
  height: 0.6rem;
  line-height: 0.6rem;
  border: 0;
}
:deep(.van-tab--active) {
  .tabs-btn {
    background-color: #1989fa !important;
    color: #fff !important;
  }
}

.tabs-box {
  background-color: #fff;
  border-radius: 4.266666666666667vmin;
  margin: 0 auto 0.3rem;
  padding: 0.4rem 0 0.4rem;
  width: 6.9rem;
  max-width: 690px;
}
.mt {
  margin-top: 0.2rem;
}
:deep(.van-grid-item__content) {
  background-color: #f4f9ff !important;
  border-radius: 0.1rem;
  float: left;
  font-size: 0;
  margin-bottom: 0.1rem;
  padding: 0.2rem 0;
  width: 100%;
}
:deep(.van-image) {
  display: block;
  height: 1.5rem;
  margin: 0 auto;
  width: 1.5rem;
  border-radius: 0.1rem;
}
:deep(.van-image__img) {
  border-radius: 0.1rem !important;
}
.text {
  width: 1.7rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
  font-family: PingFangSC-Regular, Source Han Sans CN;
  font-size: 3.2vmin;
  margin-top: 0.1rem;
  margin-bottom: 0;
  text-align: center;
}
.text1 {
  color: #d6a966;
  font-family: PingFangSC-Medium, Source Han Sans CN;
  font-size: 3.2vmin;
  margin-bottom: 1.3333333333333335vmin;
  margin-top: 0.6666666666666667vmin;
  overflow: hidden;
  padding: 0 1.3333333333333335vmin;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:deep(.van-button--mini) {
  padding: 0 0.3rem;
}
</style>
